---
title: Progress
description: A lightweight progress bar with semantic colors and sizes.
component: Progress
---

<LiveComponent language="tsx">
{`
  import { Progress } from "@pipecat-ai/voice-ui-kit";

  <Progress percent={50} className="h-4" />
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    percent: {
      description: "Percentage complete (0–100)",
      type: "number",
      required: false,
      default: "0",
    },
    size: {
      description: "Convenience width presets",
      type: '"default" | "half" | "xs" | "sm" | "lg" | "xl"',
      required: false,
      default: '"default"',
    },
    color: {
      description: "Semantic color of the bar",
      type: '"primary" | "secondary" | "destructive" | "warning" | "active" | "inactive" | "agent" | "client"',
      required: false,
      default: '"primary"',
    },
    rounded: {
      description: "Rounded pill style",
      type: "boolean",
      required: false,
      default: "false",
    },
    className: {
      description: "Additional CSS classes to apply (e.g. height, width)",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage

### Basic

<LiveComponent language="tsx">
{`
  import { Progress } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-3">
    <Progress className="h-4" />
    <Progress percent={50} className="h-4" />
    <Progress percent={100} className="h-4" />
  </div>
`}
</LiveComponent>

### Sizes

<LiveComponent language="tsx">
{`
  import { Progress } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-row gap-3 items-center">
    <Progress percent={50} size="sm" className="h-4" />
    <Progress percent={50} size="lg" className="h-4" />
    <Progress percent={50} size="xl" className="h-4" />
    <Progress percent={50} size="half" className="h-4" />
  </div>
`}
</LiveComponent>

### Colors

<LiveComponent language="tsx">
{`
  import { Progress } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-row gap-3 items-center">
    <Progress percent={50} color="secondary" className="h-4"/>
    <Progress percent={50} color="destructive" className="h-4"/>
    <Progress percent={50} color="warning" className="h-4"/>
    <Progress percent={50} color="active" className="h-4"/>
    <Progress percent={50} color="inactive" className="h-4"/>
    <Progress percent={50} color="agent" className="h-4"/>
    <Progress percent={50} color="client" className="h-4"/>
  </div>
`}
</LiveComponent>

### Rounded

<LiveComponent language="tsx">
{`
  import { Progress } from "@pipecat-ai/voice-ui-kit";

  <Progress percent={50} rounded className="h-4 w-full" />
`}
</LiveComponent>

### In Badges

<LiveComponent language="tsx">
{`
  import { Badge, Progress } from "@pipecat-ai/voice-ui-kit";

  <Badge buttonSizing>
    <Progress percent={50} size="lg" className="h-[2px]" />
    Some Badge
  </Badge>
`}
</LiveComponent>


